<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="changePasswordVisible"
    size="1200px"
    :show-close="false"
    @close="handleClose"
  >
    <template #header>
      <div class="drawer-header">
        <div class="header-content">
          <span class="drawer-title">修改密码</span>
        </div>
        <el-button type="text" @click="handleClose" class="close-btn"
          >关闭</el-button
        >
      </div>
    </template>

    <div class="change-password-container">
      <div class="form-layout">
        <div class="avatar-section">
          <img
            src="@/assets/images/icon/avatar_icon.png"
            alt="用户头像"
            class="avatar-image"
          />
        </div>
        <div class="form-section">
          <el-form
            :model="formData"
            :rules="formRules"
            ref="formRef"
            label-width="100px"
            class="password-form"
          >
            <el-form-item label="当前密码" prop="oldPassword">
              <el-input
                v-model="formData.oldPassword"
                placeholder="请输入当前密码"
                type="password"
                show-password
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="formData.newPassword"
                placeholder="请输入新密码"
                type="password"
                show-password
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="formData.confirmPassword"
                placeholder="请再次输入新密码"
                type="password"
                show-password
                style="width: 400px"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button plain @click="handleClose" class="footer-btn">取消</el-button>
      <el-button type="primary" @click="handleSave" class="footer-btn"
        >保存</el-button
      >
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { userUpdatePassword } from "@/api";
import md5 from "js-md5";
const changePasswordVisible = ref(false);
const formRef = ref(null);

const formData = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const formRules = {
  oldPassword: [{ required: true, message: "请输入当前密码", trigger: "blur" }],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== formData.newPassword) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const openDrawer = () => {
  // 重置表单
  formData.oldPassword = "";
  formData.newPassword = "";
  formData.confirmPassword = "";
  changePasswordVisible.value = true;
};

const handleClose = () => {
  changePasswordVisible.value = false;
  // 重置表单
  formData.oldPassword = "";
  formData.newPassword = "";
  formData.confirmPassword = "";
  if (formRef.value) {
    formRef.value.resetFields();
  }
};

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      formData.oldPassword = md5(formData.oldPassword);
      formData.newPassword = md5(formData.newPassword);
      formData.confirmPassword = md5(formData.confirmPassword);
      userUpdatePassword(formData)
        .then((res) => {
          if (res.code == 0) {
            ElMessage.success("密码修改成功");
            handleClose();
          }
        })
        .catch((error) => {
          ElMessage.error("密码修改失败，请重试");
        });
    }
  });
};

defineExpose({
  openDrawer,
});
</script>

<style scoped lang="scss">
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 20px;

  .header-content {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .close-btn {
    font-size: 16px;
    padding: 13px 16px;
    border: 1px solid #595757;
    color: #000000;
    background: #fff;
    border-radius: 4px;

    &:hover {
      color: #409eff;
      border-color: #409eff;
    }
  }
}

.change-password-container {
  padding: 20px;
  .form-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .avatar-section {
    flex-shrink: 0;
    width: 200px;
    .avatar-image {
      width: 100%;
    }
  }
  .form-section {
    flex: 1;

    .password-form {
      max-width: 600px;
    }
  }
}

.footer-btn {
  padding: 13px 16px !important;
  border: 1px solid #595757 !important;
}

// 确保抽屉内容区域撑满全屏
:deep(.el-drawer__body) {
  padding: 0;
  height: calc(100vh - 60px);
  overflow: hidden;
}

:deep(.el-drawer) {
  width: 100% !important;
}

:deep(.el-drawer__wrapper) {
  width: 100% !important;
}
</style>
